<template>
    <div class="cart">
        <header v-if="sta == true">
            <div @click="back"><van-icon name="arrow-left" /></div>
            <span>{{ name }}</span>
            <div></div>
        </header>
        <div class="load" v-if="isShow">
            <LoadingImg />
        </div>
        <div v-else>
            <div class="item" @click="changeSta">
                <ul ref="ul">
                    <li v-for="(i, ind) in img" :key="ind">
                        <img :src="i" alt="" />
                    </li>
                </ul>
            </div>
        </div>

        <!-- 章节切换 -->
        <div v-if="tab == true" class="left" @click="getDuce"><van-icon name="arrow-left" /></div>
        <div v-if="tab == true" class="right" @click="getAdd"><van-icon name="arrow" /></div>

        <footer v-if="sta == true">
            <ul ref="foot">
                <li @click="changeId(i.id)" :class="i.id == id ? 'active' : ''" v-for="(i, ind) in arr" :key="ind">
                    <a> {{ i.short_title }}</a>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script>
import LoadingImg from "@/components/LoadingImg.vue";
import { myImgIndex } from "@/request/index.js";
import { getImgToken } from "@/request/index.js";
export default {
    components: {
        LoadingImg,
    },
    data() {
        return {
            sta: false,
            img: [],
            arr: [],
            name: "",
            id: "",
            oldId: "",
            aArr: "",
            isShow: true,
            tab: false,
        };
    },
    methods: {
        // newScroll(e){
        //     console.log(e);
        // },
        changeId(id) {
            // console.log((this.$refs.ul.scrollTop = 0));
            //不能删 需要换思路 改组件
            // let arr = JSON.parse(this.$route.query.arr);
            // console.log(JSON.parse(this.$route.query.arr));
            // let name = this.$route.query.name;
            // console.log(this.$route.query.detail, name, id);
            // this.$router.push({ path: "/cartooncontent/" + id, query: { detail: this.$route.query.detail, name: name, id: id, arr: JSON.stringify(arr) } });
            this.getImg(id);
            this.id = id;
            this.oldId = id;
        },
        changeSta() {
            this.sta = !this.sta;
            this.tab = !this.tab;
        },
        back() {
            this.$router.push({ name: "detailpage", params: { id: this.$route.query.detail } });
        },
        //不影响页面网址
        get(nextId) {
            this.tab = false;
            this.isShow = true;
            this.tab = this.img = [];
            myImgIndex({ ep_id: nextId })
                .then((data) => {
                    let imgindex = data.data.images;
                    let arr = imgindex.map((data) => {
                        return '"' + data.path + '@660w.jpg"';
                    });
                    return arr;
                })
                .then((arr) => {
                    getImgToken({ urls: "[" + arr + "]" }).then((data) => {
                        this.img = data.data.map((i) => {
                            return i.url + "?token=" + i.token;
                        });
                        this.isShow = false;
                        this.tab = true;
                    });
                });
        },
        getAdd() {
            // console.log("下一章");
            // console.log("旧id", this.oldId);
            let allArr = this.arr;
            for (let i = 0; i < allArr.length; i++) {
                if (allArr[i].id == this.oldId) {
                    if (allArr.length == i) {
                        this.$toast("已到最后一页");
                        return;
                    }

                    let next = i + 1;
                    let nextId = allArr[next].id;
                    // console.log("新id", nextId);
                    this.id = nextId;
                    this.get(nextId);
                    this.oldId = nextId;
                    return;
                }
            }
        },
        getDuce() {
            // console.log("上一章");
            let allArr = this.aArr;
            for (let i = 0; i < allArr.length; i++) {
                if (allArr[i].id == this.oldId) {
                    if (0 == i) {
                        this.$toast("已无上一页");
                        return;
                    }
                    let next = i - 1;
                    let nextId = allArr[next].id;
                    this.id = nextId;
                    this.get(nextId);
                    this.oldId = nextId;
                    return;
                }
            }
            console.log(allArr);
        },

        getImg(x) {
            this.isShow = true;
            this.name = this.$route.query.name;
            this.aArr = JSON.parse(this.$route.query.arr);
            this.arr = JSON.parse(this.$route.query.arr);
            this.oldId = this.$route.query.id;
            this.id = this.$route.query.id;
            this.img = [];
            // console.log(this.name);
            // console.log(this.id);
            myImgIndex({ ep_id: x })
                .then((data) => {
                    let imgindex = data.data.images;
                    let arr = imgindex.map((data) => {
                        return '"' + data.path + '@660w.jpg"';
                    });
                    return arr;
                })
                .then((arr) => {
                    getImgToken({ urls: "[" + arr + "]" }).then((data) => {
                        this.img = data.data.map((i) => {
                            return i.url + "?token=" + i.token;
                        });
                    });
                    this.isShow = false;
                });
        },
    },
    created() {
        this.getImg(this.$route.query.id);
    },
};
</script>

<style lang="scss" scoped>
.cart {
    .load {
        width: 100%;
        height: 100%;
        background-color: blue;
    }
    position: relative;
    header {
        display: flex;
        position: fixed;
        text-align: center;
        top: 0;
        height: 2.8125rem;
        line-height: 2.8125rem;
        width: 100%;
        background-color: #2d2d2d80;
        span {
            color: white;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            flex: 1;
        }
        div {
            color: white;
            width: 20%;
        }
    }
    width: 100%;
    li {
        width: 100%;
        height: 100%;
        img {
            width: 100%;
            height: 100%;
            vertical-align: bottom;
        }
    }
    .left {
        border-radius: 3.25rem;
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        top: 40%;
        width: 70px;
        height: 10.5rem;
        background-color: #2d2d2d80;
        color: rgb(217 217 217 / 60%);
        font-size: 3.125rem;
    }
    .right {
        border-radius: 3.25rem;
        color: rgb(217 217 217 / 60%);
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        right: 0;
        top: 40%;
        width: 70px;
        height: 10.5rem;
        background-color: #2d2d2d80;
        font-size: 3.125rem;
    }
    footer {
        bottom: 0;
        position: fixed;
        width: 100%;
        height: 3.125rem;
        line-height: 2.8125rem;
        background-color: rgb(53 53 53 / 60%);
        display: flex;
        align-items: center;
        overflow: auto;
        ul {
            padding-left: 0.625rem;
            width: 62.5rem;
            display: flex;
            height: 30px;
            li {
                font-size: 0.8125rem;
                text-align: center;
                border-radius: 8px;
                margin-right: 0.625rem;
                line-height: 30px;
                min-width: 3.5rem;
                padding: 0 0.625rem;
                color: #ebebeb;
                background-color: rgb(159 159 159 / 80%);
                &.active {
                    color: #fff1ef;
                    background-color: rgb(255 115 101 / 70%);
                }
            }
            a {
                color: white;
            }
        }
    }
}
</style>
